import {useState} from 'react'
import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';


import { html } from 'lit-html';

import './index';
import '../button/index.js'

<Meta title="Example/Modal" />

export const Template = (args) => html`
<wheat-button>button</wheat-button>
<wheat-modal visible='false'>modal</wheat-modal>
`;


<Canvas>
  <Story name="基础使用" args={{ 
      label: '基础使用'
    }}>
    {Template.bind({})}
   </Story>
</Canvas>



## 在 React 中使用
```js
import React, { useState, useEffect } from 'react'
import 'web-component-wheat-ui/dist/modal'
import 'web-component-wheat-ui/dist/button'
const App = () => {
  const [visible, setvisible] = useState(false)
  useEffect(() => {
    const MyModalDom = document.querySelector('wheat-modal')
    MyModalDom.addEventListener('onCancel', value => {
      const {
        detail: { visible }
      } = value
      console.log('触发取消方法')
      setvisible(visible)
    })

    MyModalDom.addEventListener('onConfirm', value => {
      console.log('触发确定方法')
      setvisible(false)
    })
  }, [])
  return (
    <div className='App'>
     <wheat-button onClick={() => {
          setvisible(true)
        }} id="open" type="line">
      打开弹框
    </wheat-button>
    <wheat-modal title='title' visible={visible}>
      <div slot='wheat-modal-close-icon'>close</div>
      <div slot='content'>弹框内容</div>
    </wheat-modal>
    </div>
  )
}

export default App
```

## 在 Vue 中使用

```html
<template>
  <div class="hello">
    <wheat-button @click="showModal">
      显示弹框
    </wheat-button>
    <wheat-modal title="title" :visible="visible">
      <div slot="content">弹框内容</div>
    </wheat-modal>
  </div>
</template>

<script>
import 'web-component-wheat-ui'
import 'web-component-wheat-ui/dist/static/variables.css'
export default {
  name: 'HelloWorld',
  props: {
    msg: String
  },
  data() {
    return {
      visible: false
    }
  },
  mounted() {
    const MyModalDom = document.querySelector('wheat-modal')
    MyModalDom.addEventListener('onCancel', (value) => {
      const {
        detail: { visible }
      } = value
      console.log('触发取消方法', value, visible)
      this.visible = 'false'
    })

    MyModalDom.addEventListener('onConfirm', (value) => {
      console.log('触发确定方法', value)
      this.visible = 'false'
      this.hidden()
    })
  },
  methods: {
    showModal() {
      console.log('click')
      this.visible = true
    },
    hidden() {
      this.visible = 'false'
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

```
## Attribute

| 参数          | 说明                       | 类型                | 可选值               | 默认值    |
| ------------- | -------------------------- | ------------------- | -------------------- | --------- |
| title         | 模态框标题                 | string \| ReactNode | -                    | -         |
| visible       | 是否显示模态框             | boolean             | true \| false        | false     |
| closeable     | 是否展示右上角关闭按钮     | boolean             | true \| false        | true      |
| maskClosable | 是否允许点击蒙层关闭模态框 | boolean             | true \| false        | true      |
| cancelText    | 取消按钮文案               | string              | -                    | '取消'    |
| confirmText   | 确认按钮文案               | string              | -                    | '确定'    |
| size         | 模态框尺寸           | string              | 'default' \| 'large'  \| 'small'     |  'default'     |
| style         | 自定义模态框样式           | object              | -                    | -         |
| footer        | 自定义模态框底部           | ReactNode \| null   | -                    | -         |

## Events

| 名称      | 说明                 | 类型       | 参数 | 返回值 |
| --------- | -------------------- | ---------- | ---- | ------ |
| onConfirm | 确认事件触发时的回调 | () => void | -    | -      |
| onCancel  | 取消事件触发时的回调 | () => void | -    | -      |
